@if ((libraryState$ | async)?.libraries; as libraries) {
  <div class="book-uploader">
    <div class="panel-header">
      <div class="header-icon-wrapper">
        <i class="pi pi-cloud-upload header-icon"></i>
      </div>
      <div class="header-text">
        <h2 class="panel-title">Upload Books</h2>
        <p class="panel-description">
          Upload your books to library or bookdrop folder
        </p>
      </div>
      <p-button
        icon="pi pi-times"
        (click)="closeDialog()"
        severity="secondary"
        [text]="true"
        [rounded]="true"
        class="close-button"/>
    </div>

    <div class="upload-container">
      <div class="destination-section">
        <div class="section-header">
          <span class="section-title">
            <i class="pi pi-map-marker"></i>
            Upload Destination
          </span>
        </div>
        <div class="destination-selector">
          <p-selectbutton
            [options]="stateOptions"
            [(ngModel)]="value"
            [allowEmpty]="false"
            optionLabel="label"
            optionValue="value">
          </p-selectbutton>
        </div>
      </div>

      @if (value === 'library') {
        <div class="gradient-divider"></div>
        <div class="library-selection">
          <div class="section-header">
            <span class="section-title">
              <i class="pi pi-building"></i>
              Library Selection
            </span>
          </div>
          <div class="selection-fields">
            <div class="field-group">
              <label for="library-select" class="field-label">Library</label>
              <p-select
                inputId="library-select"
                [options]="libraries"
                optionLabel="name"
                placeholder="Select Library"
                [(ngModel)]="selectedLibrary"
                class="w-full">
              </p-select>
            </div>
            <div class="field-group">
              <label for="subpath-select" class="field-label">Subpath</label>
              <p-select
                inputId="subpath-select"
                [options]="selectedLibrary?.paths"
                optionLabel="path"
                placeholder="Select Subpath"
                [(ngModel)]="selectedPath"
                [disabled]="!selectedLibrary"
                class="w-full">
              </p-select>
            </div>
          </div>
        </div>
      }

      <div class="gradient-divider"></div>

      <div class="file-upload-section">
        <div class="section-header">
          <span class="section-title">
            <i class="pi pi-file"></i>
            Select Files
          </span>
        </div>
        <p-fileupload
          name="file"
          [maxFileSize]="maxFileSizeBytes"
          [customUpload]="true"
          [multiple]="true"
          accept=".pdf,.epub,.cbz,.cbr,.cb7"
          (onSelect)="onFilesSelect($event)"
          (uploadHandler)="uploadFiles($event)"
          [disabled]="value === 'library' ? (!selectedLibrary || !selectedPath) : false">
          <ng-template #header let-files let-chooseCallback="chooseCallback" let-clearCallback="clearCallback" let-uploadCallback="uploadCallback">
            <div class="upload-actions">
              <div class="action-buttons">
                <p-button
                  severity="info"
                  (onClick)="choose($event, chooseCallback)"
                  icon="pi pi-images"
                  label="Choose"
                  [outlined]="true"
                  [disabled]="isChooseDisabled()"
                  pTooltip="Choose files to upload"
                  tooltipPosition="top"/>
                <p-button
                  (onClick)="uploadEvent(uploadCallback)"
                  icon="pi pi-cloud-upload"
                  label="Upload"
                  severity="success"
                  [disabled]="isUploadDisabled()"
                  pTooltip="Start uploading selected files"
                  tooltipPosition="top"/>
                <p-button
                  (onClick)="onClear(clearCallback)"
                  icon="pi pi-times"
                  label="Clear"
                  severity="danger"
                  [outlined]="true"
                  [disabled]="!filesPresent() || isUploading"
                  pTooltip="Clear selected files"
                  tooltipPosition="top"/>
              </div>
              <small class="upload-hint">Click "Choose" to select files or drag and drop them below</small>
            </div>
          </ng-template>
          <ng-template #content let-files let-removeFileCallback="removeFileCallback">
            @if (files?.length > 0) {
              <div class="files-list">
                @for (uploadFile of this.files; track uploadFile; let i = $index) {
                  <div class="file-item">
                    <div class="file-info">
                      <p-badge
                        [value]="uploadFile.status === 'Pending' ? 'Ready' : uploadFile.status"
                        [severity]="getBadgeSeverity(uploadFile.status)"/>
                      <span class="file-name">{{ uploadFile.file.name }}</span>
                      <span class="file-size">{{ formatSize(uploadFile.file.size) }}</span>
                    </div>
                    <div class="file-actions">
                      @switch (uploadFile.status) {
                        @case ('Pending') {
                          <p-button
                            icon="pi pi-times"
                            (click)="onRemoveTemplatingFile($event, uploadFile.file, removeFileCallback, i)"
                            severity="danger"
                            [text]="true"
                            [rounded]="true"/>
                        }
                        @case ('Uploading') {
                          <i class="pi pi-spin pi-spinner status-icon uploading"></i>
                        }
                        @case ('Uploaded') {
                          <i class="pi pi-check status-icon success"></i>
                        }
                        @case ('Failed') {
                          <i
                            class="pi pi-exclamation-triangle status-icon error"
                            [pTooltip]="uploadFile.errorMessage || 'Upload failed'"
                            tooltipPosition="top">
                          </i>
                        }
                      }
                    </div>
                  </div>
                }
              </div>
            }
          </ng-template>
          <ng-template #file></ng-template>
          <ng-template #empty>
            <div class="empty-state">
              <div class="empty-icon-wrapper">
                <i class="pi pi-cloud-upload empty-icon"></i>
              </div>
              <h3 class="empty-title">Drag and Drop Files</h3>
              <p class="empty-description">
                Supported formats: <strong>.pdf</strong>, <strong>.epub</strong>, <strong>.cbz</strong>, <strong>.cbr</strong>, <strong>.cb7</strong>
                <br/>
                Maximum file size: 100 MB per file
              </p>
            </div>
          </ng-template>
        </p-fileupload>
      </div>
    </div>
  </div>
}
